<!--
 * @description  : 坐标采集
 * @descriptionDetail: 坐标采集
 * @copyright    : 浙江烟草
 * @author       : mc
 * @create       : 2022-10-20 16:43:02
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999">
      <view class="right-icon" @click="help">
        帮助
      </view>
    </theme-navbar>
		<!-- #endif -->
		<!-- #ifdef H5-WECHAT || H5-EMP -->
		<fab-button :content="fContent" @fabtrigger="fabtrigger" />
		<!-- #endif -->
    <view class="content">
      <view :style="{width: getContainerWidth(), height: containerHeight}" id="container"></view>
      <view class="y-location" v-if="!justView" ref="yLocRef">
        <view style="color: #000;font-size: 30rpx;">
          {{ marketGis.gisName || '无名称' }}
        </view>
        <view style="font-size: 26rpx;color: #585656;margin-top: 20rpx;">
          {{ marketGis.gisDesc }}
        </view>
        <view class="popup-submit-btns">
          <u-button class="u-btn" type="primary" @click="collect">
            采集当前坐标
          </u-button>
        </view>
      </view>
      <view v-if="!justView" class="floating-button" :class="[isShowAllGis ? 'floating-button-press':'']" style="padding: 0 14px;" :style="{bottom:floatingBottom}" @click="isShowAllGis?closeAllGis():showAllGis()">
        {{ isShowAllGis?"隐藏\n已采":"显示\n已采" }}
      </view>
    </view>
    <u-modal v-model="glShow" confirm-text="关联" :show-cancel-button="true" @confirm="addLicTag" @cancel="altCal">
      <view class="slot-content">
        <view style="font-size: 32rpx;">
          确定关联{{ glInfo.gisName }}】吗？
        </view>
        <u-form-item label="距离零售户(米):" :border-bottom="false" label-position="top" :required="getIsRequired()" label-width="auto">
          <u-input :border="true" type="number" placeholder="请输入距离" v-model="glInfo.retailDistance"></u-input>
        </u-form-item>
      </view>
    </u-modal>
  </view>
</template>

<script>
	import {
		AMapMixin
	} from '@/common/AMapMixin.js';
	import certificateService from '@/service/certificate/certificate.service';
	import zjCommonService from '@/service/common/common.service';
	import {
		M_GIS_TYPE_TREE
	} from '@/service/check/mapping/enum.js';
	import {
		SET_MAP_LAT_LON
	} from '@/config/setting.config.js';
	import fabButton from '@/components/uni-fab.vue';

	export default {
		components: {
			fabButton
		},
		onLoad(opt) {
			let param = this.getRouteParam() || {};
			this.retailer = param.retailer || {};
			this.obj = param.obj;
			this.ownAreaInfo = param.ownAreaInfo || {};
			this.itemType = param.itemType;
			this.justView = param.justView;
		},
		mixins: [AMapMixin],
		data() {
			return {
				obj: {}, // 回执刷新数据需要
				glShow: false,
				itemType: '',
				ownAreaInfo: {},
				justView: false,
				shopIcon: require('@/static/check/shop-location.png'),
				currPosition: {},
				retailerIcon: undefined, // 零售户icon
				retailer: undefined, // 零售户信息
				marketGis: {
					gisDesc: '',
					gisName: '',
				}, // 采集坐标信息
				dragMarker: undefined,
				curRetailerMarker: null, // 当前零售户marker
				isShowAllGis: false, // false 显示已采集   true 显示所有坐标，
				retailerLicGis: [], // 关联坐标集合
				overlayGroups: null, // 已关联采坐标覆盖物组
				unLicGis: [], // 未关联坐标集合
				overAllLayGroups: null, // 未关联采集坐标组
				keys: [
					'creator',
					'distance',
					'gisDesc',
					'gisName',
					'gisSubtype',
					'gisSubtypeName',
					'gisType',
					'gisTypeName',
					'gisUuid',
					'isActive',
					'latitude',
					'longitude',
					'orgCode',
					'orgUuid',
				],
				yLocHeight: 100,
				curTapMarker: undefined,
				glInfo: {},
				fContent: [{
					iconPath: require('@/static/help.png'),
					selectedIconPath: require('@/static/help.png'),
					text: '帮助',
					active: false,
				}],
			};
		},
		computed: {
			containerHeight() {
				let p = this.$u.sys().windowHeight - 44 - this.$u.sys().statusBarHeight - (this.justView ? 0 : this.yLocHeight) + 'px';
				// #ifdef H5-DINGDING
				p = this.$u.sys().windowHeight - this.$u.sys().statusBarHeight - (this.justView ? 0 : this.yLocHeight) + 'px';
				// #endif
				return p;
			},
			floatingBottom() {
				return this.yLocHeight + 16 + 'px';
			},
		},
		watch: {
			'marketGis.gisName': {
				handler: function(newValue, oldValue) {
					setTimeout(() => {
						this.yLocHeight = this.$refs.yLocRef.$el.clientHeight;
					}, 100);
				},
			},
			'marketGis.gisDesc': {
				handler: function(newValue, oldValue) {
					setTimeout(() => {
						this.yLocHeight = this.$refs.yLocRef.$el.clientHeight;
					}, 100);
				},
			},
		},
		mounted() {
			this.setRightBtns();
			this.init();
		},
		methods: {
			init() {
				// this.$modal.showLoading('地图加载中...');
			},
			setRightBtns() {
				// #ifdef H5-DINGDING
				this.$deviceApi.setRight('帮助', () => {
					this.help();
					this.setRightBtns();
				}, true, true);
				// #endif
			},
			fabtrigger(btn) {
				if (btn.index == 0) {
					this.help();
				}
			},
			initAmap() {
				this.retailerIcon = new AMap.Icon({
					size: new AMap.Size(24, 24), // 图标尺寸
					image: this.shopIcon, // Icon的图像
					imageSize: new AMap.Size(24, 24), //,
				});
				let self = this;
				this.geolocation = new AMap.Geolocation({
					enableHighAccuracy: true, // 是否使用高精度定位，默认:true
					timeout: 10000, // 超过10秒后停止定位，默认：5s
					// buttonPosition:'RB',    //定位按钮的停靠位置
					buttonOffset: new AMap.Pixel(5, 10), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
					// zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
					content: '<img src="//a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>',
				});

				// #ifdef H5-DINGDING || H5-WECHAT || H5-EMP
				this.$deviceApi.geolocation().then(
					(pos) => {
						self.curPos = [pos.longitude, pos.latitude];
						self.currPosition.latitude = pos.latitude;
						self.currPosition.longitude = pos.longitude;
						self.setMapInstance([pos.latitude, pos.longitude]);
					},
					(error) => {
						self.justInitMap();
					}
				);
				// #endif
				// #ifndef H5-DINGDING
				self.curPos = SET_MAP_LAT_LON;
				self.currPosition.latitude = SET_MAP_LAT_LON[1];
				self.currPosition.longitude = SET_MAP_LAT_LON[0];
				self.setMapInstance(SET_MAP_LAT_LON);
				// #endif

			},
			// 查询当前零售户已关联的坐标
			queryRetailerGis() {
				this.$modal.showLoading('正在查询已关联坐标...');
				zjCommonService
					.getRetailerLicGis(this.retailer.retailerUuid, this.itemType)
					.then((dr) => {
						this.$modal.hideLoading();
						if (dr.success) {
							this.retailerLicGis = dr.data || [];
							this.initLicGis();
							if (this.isShowAllGis) {
								this.showAllGis();
							}
						}
					})
					.catch((e) => {
						this.$modal.hideLoading();
						console.log(e);
					});
			},
			getContainerWidth() {
				return this.$u.sys().windowWidth + 'px';
			},
			getIsRequired() {
				// return this.glInfo.gisSubtype == M_GIS_TYPE_TREE.GIS_TYPE1 || this.glInfo.gisSubtype == M_GIS_TYPE_TREE.GIS_TYPE2
				return true;
			},
			setMapInstance(cords) {
				this.$modal.hideLoading();
				if (!this.hasInited) return;
				let self = this;
				self.curCords = new AMap.LngLat(cords[0], cords[1]);
				self.amap = new AMap.Map('container', {
					center: self.curCords,
					zoom: 18,
					resizeEnable: true,
					scrollWheel: true,
					zoomEnable: true,
					mapStyle: 'amap://styles/fresh',
				});
				this.loadPlugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.OverView', 'AMap.MapType', 'AMap.Geolocation'], () => {
					// 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
					self.amap.addControl(new AMap.Scale());
					self.amap.addControl(new AMap.ToolBar());
					self.amap.addControl(self.geolocation);
				});
				// 地图缩放
				this.amap.on('zoomend', function(ev) {
					self.closeInfoWindow();
				});
				// 地图移动
				this.amap.on('moveend', (ev) => {
					console.log(ev);
					self.currPosition.latitude = self.amap.getCenter().lat;
					self.currPosition.longitude = self.amap.getCenter().lng;
					if (self.dragMarker && !this.justView) {
						self.dragMarker.setPosition([self.currPosition.longitude, self.currPosition.latitude]);
					}
				});
				this.initCurRetailer();
				this.initLocation();
				this.queryRetailerGis();
			},
			// 添加当前零售户标记
			initCurRetailer() {
				let self = this;
				if (this.retailer && this.retailer.longitude) {
					this.curRetailerMarker = new AMap.Marker({
						position: [this.retailer.longitude, this.retailer.latitude],
						icon: this.retailerIcon,
						offset: new AMap.Pixel(-14, -40),
					});
					this.curRetailerMarker.setMap(this.amap);
					this.curRetailerMarker.on('click', (info) => {
						// 点击后用不用显示当前零售户名称
						this.showCurRetailerInfo();
					});
				}
			},
			initLicGis() {
				if (this.overlayGroups) {
					this.amap.remove(this.overlayGroups);
				}
				let markers = [];
				// 查询已采集坐标数据
				if (this.retailerLicGis.length == 0) {
					return;
				}
				this.retailerLicGis.forEach((mg, idx) => {
					let markerConfig = {
						title: mg.gisName,
						icon: new AMap.Icon({
							size: new AMap.Size(20, 24), // 图标尺寸
							image: this.getGisIconPath(mg.gisSubtype, true), // Icon的图像
							imageSize: new AMap.Size(20, 24),
						}),
						position: [mg.longitude, mg.latitude],
						offset: new AMap.Pixel(-8, 5),
						label: {},
					};
					if (idx < 30) {
						markerConfig.label = {
							content: mg.gisName,
							offset: new AMap.Pixel(26, 1),
						};
					}
					let marker = new AMap.Marker(markerConfig);
					marker.on('click', () => {
						this.showLicGisInfo(marker, mg);
					});
					markers.push(marker);
				});
				this.overlayGroups = new AMap.OverlayGroup(markers);
				this.amap.add(this.overlayGroups);
				if (this.justView) {
					this.amap.setFitView();
				}
			},
			getDistance(longitude, latitude) {
				return AMap.GeometryUtil.distance([this.retailer.longitude, this.retailer.latitude], [longitude, latitude]);
			},
			/**
			 * 显示指定的已采集坐标信息窗体
			 * @param mg
			 */
			showLicGisInfo(marker, info) {
				let title = info.gisName;
				if (info.retailDistance) {
					title = title + '(' + info.retailDistance + '米)';
				}
				let content = `<div class="gaode-info-title">${title}</div>
				<div class="gaode-info-content">地址：${info.gisDesc}</div>`;
				let container1 = document.createElement('div');
				container1.style.margin = '-5px';
				container1.innerHTML = content;
				if (!this.justView) {
					let btnContainer1 = document.createElement('div');
					btnContainer1.className = 'row';
					let editBtn1 = document.createElement('button');
					editBtn1.style = 'padding: 5px 10px;background-color: #1fa3ff;color: #FFF;border: none;border-radius: 5px;width:40%;';
					editBtn1.innerText = '删除关联';
					btnContainer1.appendChild(editBtn1);
					// 关联
					editBtn1.addEventListener('click', () => {
						// TODO 关联
						this.delCollectedGisInfo(info);
					});
					container1.appendChild(btnContainer1);
				}
				let infoWindow = new AMap.InfoWindow({
					content: container1,
					asOrigin: false,
					asDestination: false,
					placeSearch: false,
					offset: new AMap.Pixel(6, 0),
				});
				infoWindow.open(this.amap, marker.getPosition());
			},
			/**
			 * 初始化当前位置图标
			 */
			initLocation() {
				if (this.justView) return;
				let self = this;
				// 设置地图中心点
				self.amap.setCenter(new AMap.LngLat(self.currPosition.longitude, self.currPosition.latitude));
				let icon = new AMap.Icon({
					size: new AMap.Size(19, 28), // 图标尺寸
					image: require('@/static/market/new-location.png'),
					// imageOffset: new AMap.Pixel(0, -60),  // 图像相对展示区域的偏移量，适于雪碧图等
					imageSize: new AMap.Size(19, 28), // 根据所设置的大小拉伸或压缩图片
				});
				this.dragMarker = new AMap.Marker({
					position: this.amap.getCenter(),
					icon: icon,
					offset: new AMap.Pixel(-9, -28),
					// 设置是否可以拖拽
					draggable: true,
					cursor: 'move',
					// 设置拖拽效果
					raiseOnDrag: true,
				});
				this.dragMarker.setMap(this.amap);
				this.dragMarker.on('dragend', (info) => {
					self.currPosition.latitude = info.lnglat.lat;
					self.currPosition.longitude = info.lnglat.lng;
					// 根据坐标查询地址信息
					self.getPosition(info.lnglat.lng, info.lnglat.lat);
				});
				self.getPosition(self.currPosition.longitude, self.currPosition.latitude);
				this.amap.setFitView(this.curRetailerMarker, this.dragMarker);
			},
			/**
			 * 根据坐标查询位置信息
			 * @param lng
			 * @param lat
			 */
			getPosition(lng, lat) {
				let self = this;
				AMap.plugin('AMap.Geocoder', function() {
					let geocoder = new AMap.Geocoder({
						// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
						city: '全国',
					});
					let lnglat = [lng, lat];
					geocoder.getAddress(lnglat, function(status, result) {
						if (status === 'complete' && result.info === 'OK') {
							self.marketGis.longitude = lng;
							self.marketGis.latitude = lat;
							self.marketGis.gisName = result.regeocode.addressComponent.building || result.regeocode.addressComponent.neighborhood;
							self.marketGis.gisDesc = result.regeocode.formattedAddress;
						}
					});
				});
			},
			/**
			 * 关闭窗体信息
			 */
			closeInfoWindow() {
				this.amap.clearInfoWindow();
				this.curTapMarker = undefined;
			},
			/**
			 * 采集
			 */
			collect() {
				if (!this.marketGis.longitude || !this.marketGis.latitude) {
					this.$modal.alert('请选择采集坐标位置');
					return;
				}
				this.setRouteParam(this.marketGis);
				this.$u.route({
					url: '/pages/check/poiCollect/poiCollect',
					params: {
						from: 1, // 来源于检查项
						relatveLic: false,
						fromItemType: this.itemType,
						ownAreaOrgUuid: this.ownAreaInfo.orgUuid,
						ownAreaOrgName: this.ownAreaInfo.orgName,
						latitude: this.retailer.latitude,
						longitude: this.retailer.longitude,
					},
				});
			},
			updateBackState(param) {
				if (param.updLic) {
					// 刷新已關聯的數據
					this.queryRetailerGis();
				} else if (param.relatveLic) {
					this.saveRelGis(param.relatveLic);
				} else if (param.addUnLic) {
					this.isShowAllGis && this.showAllGis();
				}
			},
			/**
			 * 显示已采集gis坐标
			 */
			showAllGis() {
				this.$u.loading('查询已采集的坐标中...');
				// 查询已采集坐标数据
				let param = {};
				this.isShowAllGis = true;
				param.longitude = this.currPosition.longitude;
				param.latitude = this.currPosition.latitude;
				param.gisSubtype = this.itemType;
				zjCommonService.getNearBy(param).then((res) => {
					this.$u.hideLoading();
					if (!res.success) return;
					this.unLicGis = res.data || [];
					this.initAllGis();
				});
			},
			initAllGis() {
				let self = this;
				if (self.overAllLayGroups) {
					this.amap.remove(self.overAllLayGroups);
					self.overAllLayGroups = undefined;
				}
				let markers = [];
				this.unLicGis = this.unLicGis.filter((itp) => {
					return (
						this.retailerLicGis.filter((op) => {
							return op.gisUuid == itp.gisUuid;
						}).length == 0
					);
				});
				if (this.unLicGis.length == 0) {
					// self.$modal.alert("没有已采集的坐标");
					return;
				}
				this.unLicGis.forEach((mg, idx) => {
					let markerConfig = {
						title: mg.gisName,
						icon: new AMap.Icon({
							size: new AMap.Size(20, 24), // 图标尺寸
							image: this.getGisIconPath(mg.gisSubtype, false), // Icon的图像
							imageSize: new AMap.Size(20, 24),
						}),
						position: [mg.longitude, mg.latitude],
						offset: new AMap.Pixel(-8, 5),
						label: {},
					};
					if (idx < 30) {
						markerConfig.label = {
							content: mg.gisName,
							offset: new AMap.Pixel(26, 1),
						};
					}
					let marker = new AMap.Marker(markerConfig);
					marker.on('click', () => {
						self.showCollectedGisInfo(marker, mg);
					});
					markers.push(marker);
				});
				self.overAllLayGroups = new AMap.OverlayGroup(markers);
				self.amap.add(self.overAllLayGroups);
			},
			/**
			 * 显示指定的已采集坐标信息窗体
			 * @param mg
			 */
			showCollectedGisInfo(marker, info) {
				let content = `<div class="gaode-info-title">${info.gisName}-(${Number(this.getDistance(info.longitude, info.latitude)).toFixed(2)}米)</div>
					<div class="gaode-info-content">地址：${info.gisDesc}</div>`;
				let container = document.createElement('div');
				container.style.margin = '-5px';
				let btnContainer = document.createElement('div');
				btnContainer.className = 'row';
				let editBtn = document.createElement('button');
				editBtn.style = 'padding: 5px 10px;background-color: #1fa3ff;color: #FFF;border: none;border-radius: 5px;width:40%;';
				editBtn.innerText = '关联';
				btnContainer.appendChild(editBtn);
				let delBtn = document.createElement('button');
				delBtn.style = 'padding: 5px 10px;background-color: #f90;;color: #FFF;border: none;border-radius: 5px;width:40%;';
				delBtn.innerText = '编辑';
				btnContainer.appendChild(delBtn);
				// 关联
				editBtn.addEventListener('click', () => {
					// TODO 关联
					this.saveRelGis(info);
				});
				// 编辑
				delBtn.addEventListener('click', () => {
					this.setRouteParam(info);
					this.$u.route({
						url: '/pages/check/poiCollect/poiCollect',
						params: {
							from: 1, // 来源于检查项
							relatveLic: false,
							fromItemType: this.itemType,
							ownAreaOrgUuid: this.ownAreaInfo.orgUuid,
							ownAreaOrgName: this.ownAreaInfo.orgName,
							latitude: this.retailer.latitude,
							longitude: this.retailer.longitude,
						},
					});
				});
				container.innerHTML = content;
				container.appendChild(btnContainer);

				let infoWindow = new AMap.InfoWindow({
					content: container,
					asOrigin: false,
					asDestination: false,
					placeSearch: false,
					offset: new AMap.Pixel(6, 0),
				});
				infoWindow.open(this.amap, marker.getPosition());
			},
			// 展示当前零售户的window信息
			showCurRetailerInfo() {
				this.curTapMarker = this.curRetailerMarker;
				let content = `<div class="gaode-info-title">${this.retailer.managerName}</div>
							<div class="gaode-info-content">地址：${this.retailer.companyName}</div>`;
				let container = document.createElement('div');
				container.style.margin = '-5px';
				container.innerHTML = content;
				let infoWindow = new AMap.InfoWindow({
					content: container,
					asOrigin: false,
					asDestination: false,
					placeSearch: false,
					offset: new AMap.Pixel(-10, -10),
				});
				infoWindow.open(this.amap, new AMap.LngLat(this.retailer.longitude, this.retailer.latitude));
			},
			/**
			 * 删除指定的已采集GIS坐标
			 * @param mg
			 */
			delCollectedGisInfo(info) {
				this.$modal.confirm(`确定删除关联【${info.gisName}】吗？`, () => {
					let gis = this.retailerLicGis.filter((g) => g.gisUuid == info.gisUuid)[0];
					zjCommonService.delLicMarketGis(gis.gisLicUuid).then((dr) => {
						if (dr.success) {
							this.closeInfoWindow();
							this.queryRetailerGis();
						} else {
							this.$u.toast(dr.msg);
						}
					});
				});
			},
			/**
			 * 保存关联的已采集坐标
			 */
			saveRelGis(info) {
				this.glInfo = info;
				if (this.$u.test.isEmpty(this.glInfo.retailDistance)) {
					this.glInfo.retailDistance = Number(this.getDistance(this.glInfo.longitude, this.glInfo.latitude)).toFixed(2);
				}
				this.$set(this.glInfo, 'retailDistance', this.glInfo.retailDistance);
				this.glShow = true;
			},
			altCal() {
				this.glShow = false;
				this.glInfo = {};
			},
			addLicTag() {
				// (this.glInfo.gisSubtype == M_GIS_TYPE_TREE.GIS_TYPE1 || this.glInfo.gisSubtype == M_GIS_TYPE_TREE.GIS_TYPE2)
				if (this.$u.test.isEmpty(this.glInfo.retailDistance)) {
					this.$u.toast('请输入关联标签和零售户的距离信息');
					return;
				}
				this.glShow = false;
				this.$modal.showLoading('正在关联...');
				zjCommonService
					.addLicMarketGis(this.retailer.retailerUuid, this.glInfo.gisUuid, this.glInfo.retailDistance)
					.then((dr) => {
						this.$modal.hideLoading();
						this.glInfo = {};
						if (dr.success) {
							this.$u.toast('关联成功');
							this.closeInfoWindow();
							this.queryRetailerGis();
						} else {
							this.$u.toast(dr.msg);
						}
					})
					.catch((e) => {
						this.$modal.hideLoading();
						console.log(e);
						this.glInfo = {};
					});
			},
			/**
			 * 关闭显示已采集坐标
			 */
			closeAllGis() {
				this.isShowAllGis = false;
				this.unLicGis = [];
				if (this.overAllLayGroups) {
					this.amap.remove(this.overAllLayGroups);
				}
			},
			/**
			 * 帮助提示
			 */
			help() {
				!this.isShowAllGis && this.$modal.alert('拖动“气泡”图标至指定位置，点击信息窗体中的“采集当前坐标”');
				this.isShowAllGis && this.$modal.alert('点击图标，编辑或关联已采集坐标');
			},
			justInitMap() {
				this.$modal.alert('请在设备的设置中开启APP的定位权限后重新获取当前位置');
				this.amap = new AMap.Map('container', {
					showControlButton: true,
					zoom: 18,
				});
				let self = this;
				this.$modal.hideLoading();
			},
			/**
			 * 获取采集坐标的类型小图片
			 * @param {Object} gitType  gis类型
			 * @param {Object} hasLic  是否已关联
			 */
			getGisIconPath(gitType, hasLic) {
				let path = '';
				if (gitType == '0101') {
					path = 'gt0101';
				} else if (gitType == '0102') {
					path = 'gt0102';
				} else if (gitType == '0103') {
					path = 'gt0103';
				} else if (gitType == '0104') {
					path = 'gt0104';
				} else if (gitType == '0105') {
					path = 'gt0105';
				} else if (gitType == '0106') {
					path = 'gt0106';
				}
				if (path != '') {
					path = path + (hasLic ? '_lic' : '');
				} else {
					return require('@/static/check/gps.png');
				}
				return require('@/static/check/gis/' + path + '.png');
			},
		},
		onUnload() {
			if (this.justView) return;
			let pages = getCurrentPages();
			pages[pages.length - 1].updateEvent({
				surGis: this.obj,
			});
		},
	};
</script>

<style scoped lang="scss">
	.button {
		padding: 10px;
	}

	.page {
		padding: 0;
	}

	.right-icon {
		padding: 0 25rpx;
		font-size: 30rpx;
		color: white;
	}

	#container {
		/* #ifdef H5 */
		width: 100%;
		height: 100%;
		/* #endif */
		/* #ifdef APP-PLUS */
		height: calc(100vh - 44 - var(--status-bar-height));
		margin-top: calc(44 + var(--status-bar-height));
		/* #endif */
	}

	.retailer-markers {
		width: 30%;
		position: absolute;
		top: calc(84px + env(safe-area-inset-top));
		z-index: 888;
		line-height: 38rpx;
		background-color: rgba(255, 255, 255, 1);
		margin: 0 10px;
		padding: 20rpx 20rpx;
		border-radius: 10px;
	}

	.markers-state {
		font-size: 28rpx;
		margin: 0 10rpx;
		background-color: rgba(255, 255, 255, 1);
		display: inline-flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}

	.index-class {
		font-weight: bold;
	}

	.poi-info {
		color: #666;
		line-height: 25px;
		margin: 5px 0px;
		width: 100%;
		display: inline-flex;
		flex-direction: column;
		font-size: 28rpx;
		margin-bottom: 5rpx;
	}

	.poi-name {
		margin: 3rpx 0rpx;
	}

	.poi-price {
		display: inline-flex;
		flex-direction: row;
		align-items: center;
		margin: 3rpx 0rpx;
	}

	.poi-price-txt {
		margin-left: 28rpx;
	}

	/deep/.row {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin: 3px 0px;
	}

	.poi-title {
		color: black;
		font-size: 32rpx;
	}

	.task-status-lst {
		line-height: 38rpx;
		margin: 10px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.item-circle-status {
		width: 4px;
		height: 16px;
		border-radius: 20%;
	}

	.item-color {
		color: #999;
		margin-left: 15px;
	}

	.cur-loc {
		position: absolute;
		bottom: 20px;
		left: 15px;
		padding: 5px;
		background: #fff;
		width: 35px;
		height: 35px;
		box-shadow: 0px 0px 0px 1px #ddd;
	}

	.y-location {
		position: fixed;
		bottom: 0;
		width: 100%;
		opacity: 0.86;
		background-color: #ffffff;
		padding: $cm-conent-padding-column $cm-content-paddng-row;
		border-top-left-radius: 25rpx;
		border-top-right-radius: 25rpx;
	}

	.floating-button {
		color: #fff;
		position: absolute;
		right: 16px;
		width: 56px;
		height: 56px;
		font-size: 20rpx;
		text-align: center;
		border-radius: 50%;
		z-index: 1500;
		overflow: hidden;
		transition-duration: 300ms;
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: $u-type-primary;
		border: 1px solid $u-type-primary;
	}

	.floating-button-press {
		background-color: #ffffff !important;
		color: $u-type-primary;
	}

	/deep/.amap-toolbar {
		left: 0px !important;
		bottom: 180px !important;
		right: auto !important;
	}

	/deep/.amap-geolocation-con {
		left: 10px !important;
		bottom: 50px !important;
	}

	.slot-content {
		padding: $cm-conent-padding-column $cm-content-paddng-row;
		display: flex;
		flex-direction: column;
		width: 100%;
	}
</style>
